<template>
  <div>
    <el-table
      ref="dataTable"
      v-loading="table.loading"
      stripe
      highlight-current-row
      :data="table.tableRows"
      style="margin-top: 20px;"
      @select="select"
      @select-all="selectAll"
      @current-change="changeCurrent"
      @sort-change="changeSort"
    >
      <el-table-column v-if="isMultipleTable" type="selection" :selectable="selectable"></el-table-column>
      <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
      <el-table-column
        property="userPhone"
        label="用户手机号"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-dropdown placement="bottom-start">
            <el-button type="text" size="small">{{ scope.row.userPhone }}</el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item
                @click.native="showJoinDetail({
                detailDialog: 'UserDetailDialog',
                url: '/user/admin/one/' + scope.row.userId
              })"
              >详情</el-dropdown-item>
              <el-dropdown-item
                @click.native="showJoinSearch({
                searchDialog: 'UserMain'
              })"
              >搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
<el-table-column
        property="userNickname"
        label="用户昵称"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="userIsActive"
        label="用户是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'YES_NO')"
      ></el-table-column>
<el-table-column
        property="orderNo"
        label="内部单号"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="transactionNo"
        label="外部交易号"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="amount"
        label="金额（元）"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="integral"
        label="积分"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="type"
        label="收入或支出"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'INCOME_OUTGOING_TYPE')"
      ></el-table-column>
<el-table-column
        property="subType"
        label="收支类型"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'FUNDS_CHANGE_TYPE')"
      ></el-table-column>
<el-table-column
        property="payType"
        label="支付渠道"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'PAYMENT_TYPE')"
      ></el-table-column>
<el-table-column
        property="remark"
        label="账目备注"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="accountStatus"
        label="账目状态"
        min-width="120px"
        sortable
        show-overflow-tooltip
        :formatter="(row, column, cellValue) => formatterDict(cellValue, 'ACCOUNT_STATUS')"
      ></el-table-column>
<el-table-column
        property="version"
        label="版本号"
        min-width="120px"
        sortable
        show-overflow-tooltip
      ></el-table-column>
<el-table-column
        property="createTime"
        label="创建时间"
        min-width="120px"
        sortable
      ></el-table-column>
<el-table-column
        property="updateTime"
        label="更新时间"
        min-width="120px"
        sortable
      ></el-table-column>
<el-table-column
        property="isActive"
        label="是否可用"
        min-width="120px"
        sortable
        show-overflow-tooltip
      >
        <template slot="header">
          是否可用
          <el-tooltip effect="dark" content="账目是否可用" placement="top">
            <i class="el-icon-info" />
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <template v-if="!isOnlyShowTable">
            <el-button
              v-if="scope.row.isActive === 0"
              size="mini"
              type="danger"
              plain
              @click="active(scope.row)"
            >否</el-button>
            <el-button
              v-if="scope.row.isActive === 1"
              size="mini"
              type="primary"
              plain
              @click="active(scope.row)"
            >是</el-button>
          </template>
          <template v-else>
            <el-button v-if="scope.row.isActive === 0" size="mini" type="danger" plain>否</el-button>
            <el-button v-if="scope.row.isActive === 1" size="mini" type="primary" plain>是</el-button>
          </template>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100px">
        <template slot-scope="scope">
          <el-dropdown v-if="isOnlyShowTable">
            <el-button type="primary" size="small">
              选择
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item @click.native="showDetail(scope.row)">详情</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown v-else>
            <el-button type="primary" size="small">
              选择
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown" style="margin-left: 10px">
              <el-dropdown-item @click.native="showEdit(scope.row)">编辑</el-dropdown-item>
              <el-dropdown-item @click.native="showDetail(scope.row)">详情</el-dropdown-item>
              <el-dropdown-item divided @click.native="remove(scope.row)">
                <span style="color: #ff0000;">删除</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px; overflow: hidden">
      <div style="float: right;">
        <el-pagination
          :current-page="pager.pageNo"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </div>
  </div>
</template>

<script>
import * as utils from '@/utils/utils'
const resUrl = process.env.VUE_APP_RES_URL
export default {
  name: 'AccountDetailTable',
  props: {
    /** 是否单选表格 */
    isSingleTable: {
      type: Boolean,
      default: false
    },
    /** 是否多选表格 */
    isMultipleTable: {
      type: Boolean,
      default: false
    },
    /** 是否仅展示的表格，表格中不包含激活/冻结、编辑、删除等操作 */
    isOnlyShowTable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchType: 'advance',
      pager: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      searchOpts: {
        sortColumn: null,
        sortOrder: null
      },
      table: {
        loading: false,
        tableRows: [],
        pageSelection: {},
        allSelection: [],
        currentRow: {}
      },
      dataDictCodes: ['YES_NO','INCOME_OUTGOING_TYPE','FUNDS_CHANGE_TYPE','PAYMENT_TYPE','ACCOUNT_STATUS',],
      dataDictItems: [],
      selectedData: [],
      selectedDataIdProp: 'id',
      extraData: {},
      resUrl: resUrl
    }
  },
  computed: {},
  mounted() {
    this.search()
  },
  methods: {
    /** 表格索引 */
    indexMethod(index) {
      return index + (this.pager.pageNo - 1) * this.pager.pageSize + 1
    },
    /** 触发父组件表格搜索事件 */
    search() {
      if (this.searchType === 'advance') {
        this.$emit('searchTable')
      } else if (this.searchType === 'quick') {
        this.$emit('quickSearch')
      }
    },
    /** 触发父组件展示编辑对话框 */
    showEdit(row) {
      this.$emit('showEditDialog', JSON.parse(JSON.stringify(row)))
    },
    /** 触发父组件展示数据详情对话框 */
    showDetail(row) {
      this.$emit('showDetailDialog', JSON.parse(JSON.stringify(row)))
    },
    /** 删除行数据 */
    remove(row) {
      utils.remove({
        tableComponent: this,
        url: '/account-detail/admin/remove/' + row.id
      })
    },
    /** 激活或冻结行数据 */
    active(row) {
      utils.active({
        tableComponent: this,
        url: '/account-detail/admin/active',
        row: row
      })
    },
    /** 多选表格选中或取消选中 */
    select(selection, row) {
      utils.select(this, selection, row)
    },
    /** 多选表格全选或取消全选 */
    selectAll(selection) {
      utils.selectAll(this, selection)
    },
    /** 多选表格行数据是否可被勾选 */
    selectable(row, index) {
      return utils.selectable(this, row)
    },
    /** 单选表格选中数据 */
    changeCurrent(currentRow) {
      if (currentRow) {
        this.table.currentRow = currentRow
      }
    },
    /** 表格切换排序字段 */
    changeSort(sortColumn) {
      utils.changeSort(this, sortColumn)
    },
    /** 切换分页组件pageNo */
    changePageNo(pageNo) {
      utils.changePageNo(this, pageNo)
    },
    /** 更新分页组件pageSize */
    changePageSize(pageSize) {
      utils.changePageSize(this, pageSize)
    },
    /** 触发父组件展示关联表数据的详情对话框 */
    showJoinDetail(options) {
      this.$emit('showJoinDetailDialog', options)
    },
    /** 触发父组件展示关联表数据的搜索对话框 */
    showJoinSearch(options) {
      this.$emit('showJoinSearchDialog', options)
    },
    /** 格式化表格中的数据字典 */
    formatterDict(cellValue, dictCode) {
      return utils.getDataDictItemDisplayValue({
        dataDictItems: this.dataDictItems,
        dictCode: dictCode,
        value: cellValue
      }).displayValue
    }
  }
}
</script>

<style>
</style>